<template>
  <div class="order_list">
    <!--催收移单-->
    <div class="search">
      <el-form ref="form" :inline="true" :model="form" :rules="rules">
        <el-form-item prop="accountId" :label="$t('authority.choseCollector')">
          <el-select v-model="form.accountId" @change="changeAccount">
            <el-option v-for="(item, $index) in selectList" :label="item.collectionUserName" :value="item.collectionUserId" :key="$index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="newAccountId" :label="$t('authority.allotTo')">
          <el-select v-model="form.newAccountId">
            <el-option :label="$t('verify.plsChoose')" value=''></el-option>
            <el-option v-for="(item, $index) in filterAccount" :label="item.collectionUserName" :value="item.collectionUserId" :key="$index">{{item.collectionUserName}} ({{item.overDueNoRepayCount}})</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="move">{{$t('authority.allot')}}</el-button>
          <el-button type="primary" @click="updateActiveTab">{{$t('authority.back')}}</el-button>
        </el-form-item>
        <el-form-item prop="appName" label="">
            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')" @change="changeAppName"></select-app-list><!--app名称-->
        </el-form-item>
      </el-form><!--end form-->
    </div>
    <div class="data_list">
      <el-table ref="table" :data="tableData" :max-height="tableMaxHeight" style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="orderId" :label="$t('common.innerOrderId')" width="190"><!--内部订单号--></el-table-column>
        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
        <el-table-column prop="userId" label="User ID" min-width="110"></el-table-column>
        <el-table-column prop="userName" :label="$t('common.name')" min-width="180"></el-table-column><!--姓名-->

        <el-table-column prop="noteRemark" :label="$t('common.remark')" width="190"><!--备注--></el-table-column>
        <el-table-column prop="telFeedBack" :label="$t('collection.contactResult')" width="190"><!--联络结果-->
            <template slot-scope="{ row }">{{ findTelFeeBack(row.telFeedBack) }}</template>
        </el-table-column>

        <el-table-column prop="phone" :label="$t('common.mobileNumber')" min-width="130"></el-table-column><!--手机号-->
        <el-table-column prop="cardId" :label="$t('common.idCardNumber')" min-width="170"></el-table-column><!--身份证号-->
        <el-table-column prop="loanTime" :label="$t('common.applyDate')" min-width="170"><!--申请日期-->


          <template slot-scope="{ row }">{{ row.loanTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="contractAmount" :label="$t('common.contractAmount')" width="100"><!--借款金额-->
          <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template>
        </el-table-column>
        <el-table-column prop="periodDays" :label="$t('common.borrowingCycle')" min-width="100"><!--借款周期-->
          <template slot-scope="{ row }">{{ row.periodDays != null ? row.periodDays : "--" }}</template>
        </el-table-column>
        <el-table-column prop="lateRepay" :label="$t('common.shouldRepayAmount')" width="100"><!--应还金额-->
          <template slot-scope="{ row }">{{ row.lateRepay | formatCurrency }}</template>
        </el-table-column>
        <el-table-column align="left" :label="$t('common.shouldRepayTime')" min-width="170" prop="repayTime"><!--应还时间-->
          <template slot-scope="{ row }">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
        </el-table-column>
        <el-table-column prop="lateDays" :label="$t('common.overdueDays')" min-width="100"><!--逾期天数-->
          <template slot-scope="{ row }">{{ row.lateDays != null ? row.lateDays : "--" }}</template>
        </el-table-column>
      </el-table>
    </div>
    <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

  </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import SelectAppList from '@/components/select-app-list';

    let that = null;

    export default {
        name: 'orderList',
        components: {
            Pagination,
            SelectAppList
        },
        mixins: [mixin],
        props: {
            activeTab: {
                type: String
            },
            searchForm: {
                type: Object
            }
        },
        data() {
            return {
                telPreFeedBackData:[],
                telFeedBackData:[],
                form: {
                    accountId: '',
                    newAccountId: '',
                    appName: ''
                },
                rules: {
                },
                selectList: [],
                selectedList: [],
                auditorList: [],
                moveToSelectList: [],

                adminUserIdsList: [],
            };
        },
        watch: {
            activeTab(val) {
                if (val === 'orderList') {
                    this.form.accountId = this.searchForm.accountId;
                    this.form.newAccountId = '';
                    this.form.appName = '';
                    this.page.currentPage = 1;
                    this.getTableData();
                    this.getSelectOption();
                }
            },
            //  选择催收员 form.accountId
            'form.accountId'(val) {
                // 催收员变化时，情况分配到催收员选项
                this.form.newAccountId = '';
                if (val) {
                    this.getMoveToOption();
                }
            }

        },
        computed: {
            filterAccount() {
                if (this.form.accountId === this.form.newAccountId) {
                    this.form.newAccountId = '';
                }
                return this.moveToSelectList.filter(item => item.collectionUserId !== this.form.accountId);
            },
        },
        methods: {
            getTableData(page = this.page) {
                const params = {
                    collectionUserId: this.form.accountId,
                    appName: this.form.appName,
                    orderId: '',
                    phone: '',
                    teamId: '',
                    userId: '',
                    lstartTime: '',
                    lendTime: '',
                    telFeedBack: '',
                    collectionUserName: '',
                    commitCount: '',
                    promiseTimeStart: '',
                    promiseTimeEnd: '',
                    lastCommitTimeStart: '',
                    lastCommitTimeEnd: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
//                if (form) {
//                    Object.keys(params).forEach((key) => {
//                        if (form[key]) {
//                            params[key] = form[key];
//                        }
//                    });
//                }
                this.$api.collection.queryHandlingDistributionTask(params).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error) {
                        this.tableData = data.resultData || [];
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = window.document.body.clientHeight - 190;
                    // this.page.recordsTotal = data.pageCount;
                });
            },
            changeAccount(val) {
                this.page.currentPage = 1;
                this.getTableData();
            },
            getSelectOption() {
                const params = {
                    roleCode: '127',
                    isPage: 1,
                    collectionUserName: '', // 账号类型
                    page: {
                        pageNo: 1,
                        pageSize: 10000
                    },
                };
                this.$api.authorityManage.queryCollectorsNew(params).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.selectList = data.resultData;
                    }
                });
                this.getMoveToOption();
            },
            getMoveToOption() {
                const params = {
                    // isPage: '0',
                    // isCollect: '1',
                    collectionUserId: this.form.accountId,
                    // roleCode:'180'
                };
                this.$api.authorityManage.getSameTeamSubCollector(params).then((res) => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.moveToSelectList = data;
                    }
                });
            },
            move() {
                if (this.selectedList.length === 0) {
                    this.$message.warning(this.$t('authority.chooseOrder'));
                    return false;
                }
                if (!this.form.newAccountId) {
                    this.$message.warning(this.$t('authority.chooseAlloter'));
                    return false;
                }
                const params = {
                    // operator: this.form.accountId,
                    collectionUserId: this.form.newAccountId,
                    ids: this.selectedList.join(',')
                };
                this.$api.authorityManage.changeOverdueInfoCollector(params).then((res) => {
                    const { status, error } = res;
                    if ('1' === status && '00000000' === error) {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getMoveToOption();
                        this.getTableData();
                    }
                });
                return true;
            },
            handleSelectionChange(val) {
                this.selectedList = [];
                val.forEach((item) => {
                    this.selectedList.push(item.id);
                });
            },
            updateActiveTab() {
                this.$emit('updateActiveTab', 'accountList');
            },
            changeAppName() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            // 获取联络结果数据
            getDicts() {
                this.$api.collection.queryDictForNotes().then((res) => {
                    const { status, data, error } = res;
                    if (status === '1' && error === '00000000') {
                        this.telFeedBackData = data.telFeedBacks;
                    }
                });
            },
            getPreDicts() {
                const params = {
                    type: 8,
                };
                this.$api.collection.getDicts(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.telPreFeedBackData = data.telFeedBacks;
                    }
                });
            },
            findTelFeeBack(val){
                let result = {};
                this.telFeedBackData.forEach(item=>{
                    if(val==item.nid){
                        result = item
                    }
                });
                this.telPreFeedBackData.forEach(item=>{
                    if(val==item.nid){
                        result = item
                    }
                })
                return result.value ?result.value:''
            },
        },
        created() {
            that = this;
            if (this.activeTab === 'orderList') {
                this.form.accountId = this.searchForm.accountId;
                this.form.newAccountId = '';
                this.page.currentPage = 1;
                this.getTableData();
                this.getSelectOption();
                this.getDicts();
                this.getPreDicts()
            };
        }
    };
</script>

<style lang="scss" scoped>
  .search{
    background-color: #fff;
    padding: 22px 40px 0;
  }
  .data_list{
    margin: 16px 24px;
    padding: 16px;
    background-color: #fff;
  }
</style>
